<template>
	<view>
		<view class="content">
				<view class="active-one-lists flex justify-between" v-for="(item,index) in lists" :key="index">
					<view class="active-one-lists-left flex">
						<view class="img-box">
							<image class="head" :src="item.img" mode=""></image>
							<image class="sex"
								:src="item.isFocus == 0 ? '/static/image/mine/man.png' : '/static/image/mine/girl.png'" mode="">
							</image>
						</view>
						<view class="">
							<view class="flex">
								<view class="active-one-title">
									{{item.name}}
								</view>
								<image class="active-one-vip" src="/static/image/mine/vips.png" mode=""></image>
							</view>
							<view class="active-one-time">
								2022-05-10
							</view>
						</view>
					</view>					
					<view class="active-one-lists-right-z" >
						互动{{item.num}}次
					</view>
					
					
						
				</view>
				<view class="normaltxt" v-if="lists.length==0"> 没有更多了~ </view>	
		</view>
		<!-- 无数据 -->
		<view class="nodata" v-if="showNo">
				<image src="/static/image/mine/mine-novoice.png" mode="" class="noimg"></image>
				<view class="notext">你最近还没有语音互动哦 ~	</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				showNo:false,
				lists:[
					
				]
			}
		},
		onShow() {
			this.getInterList()
		},
		methods: {
			getInterList(){
				this.$http.getGuanList({type:'mic'}).then(res => {
					if (res.code == '1') {
						this.lists= res.data.data;
						
					}		
				})
			},
		}
	}
</script>
    
<style  lang="scss" scoped>
	page{
		background: #fff;
	}
	.content{
		padding: 30rpx;
	}
	.normaltxt {
		text-align: center;
		font-size: 28rpx;
		color: rgba(153, 153, 153, 1);
		margin: 86rpx 0
	}
    //无数据
		 .nodata{
			 padding-top:100rpx;
			 text-align: center;
		 }
		 .noimg{
			 width:280rpx;
			 height:310rpx;
			 margin: 0 auto;
		 }
		 .notext{
			margin-top:40rpx;
			 font-size: 28rpx;
			 color: #999999;
			 line-height: 42rpx;
			 text-align: center;
		 }
		 .active-one-lists {
		 	width: 100%;
		 	height: 128rpx;
		 	border-bottom: 1rpx solid #EFEFEF;
		 	align-items: center;
		 	margin-bottom: 20rpx;			

		 	.active-one-lists-left {
		 		.img-box{
		 			width: 80rpx;
		 			height: 80rpx;
		 			position: relative;
		 			margin-right: 18rpx;
		 		}
		 		.head {
		 			width: 80rpx;
		 			height: 80rpx;
		 			border-radius: 50%;
		 		}
		 
		 		.sex {
		 			width: 32rpx;
		 			height: 32rpx;
		 			border-radius: 50%;
		 			position: absolute;
		 			right: 6rpx;
		 			top: 46rpx;
		 		}
		 
		 		.active-one-title {
		 			font-weight: 500;
		 			font-size: 32rpx;
		 			color: #000000;
		 		}
		 
		 		.active-one-vip {
		 			width: 54rpx;
		 			height: 28rpx;
		 			margin: 10rpx 0 0 16rpx;
		 		}
		 
		 		.active-one-time {
		 			font-weight: 400;
		 			font-size: 22rpx;
		 			color: #999999;
		 			margin-top: 10rpx;
		 		}
		 	}
		 	.black{
		 		background-color: #000;
		 		color: #fff !important;
		 	}
		 	.active-one-lists-right {
		 		width: 128rpx;
		 		height: 50rpx;
		 		border-radius: 10rpx;
		 		text-align: center;
		 		line-height: 50rpx;
		 		border: 1rpx solid #000;
		 		font-weight: 400;
		 		font-size: 24rpx;
		 		color: #000000;
		 	}
			.active-one-lists-right-z{
				font-size: 24rpx;
				color:#666;
			}
		 }
</style>
